<template>
	<view class="pd">
		<view class="formrow mt70">
			<view class="z9 fz28">
				日期
			</view>
			<view class="mt20 pr jhhgerttyt row z9 dfgryusr cen">
				<view class="col">
					<picker mode="date" @change="jjcerta">
						<text v-if="from.jhhgdfc">{{from.jhhgdfc}}</text>
						<text v-else class="z9">开始时间 </text>
					</picker>
				</view>
				<view class="hhgxeer">

				</view>
				<view class="col">
					<picker mode="date" @change="jjcertb">
						<text v-if="from.jhhgdfd">{{from.jhhgdfd}}</text>
						<text v-else class="z9">结束时间 </text>

					</picker>
				</view>
				<image src="../../../static/img/AddViceKey/kjjhfb.png" class="drrtsert ab" mode="widthFix"></image>
			</view>
		</view>

		<view class="mt100">
			<view class="z9 fz28">
				用车状态
			</view>
			<view class="hhgbkjgbett mt50">
				
				<view class="kjhjihsdfr z9 fz28 pr" :class="idsd==idx?'act':''" v-for="(sd,idx) in  jkjhhhsd" @tap="qiehuans(idx)">
					{{sd}}
					<image v-if="idsd==idx" src="../../../static/img/xuanhsd.png" class="kjhnkjxerr" mode="widthFix"></image>
				</view>

			</view>
		</view>


	</view>
</template>
<script>
	export default {
		data() {
			return {
				idsd:0,
				from: {
					jhhgdfc: '',
					jhhgdfd: ''
				},
				jkjhhhsd:['全部','未审批','审批同意','审批拒绝','被派车']
			}
		},
		components: {},
		methods: {
			jjcerta(e) {
				this.from.jhhgdfc = e.detail.value
			},
			jjcertb(e) {
				this.from.jhhgdfd = e.detail.value
			},
			qiehuans(idx){
				this.idsd = idx
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateBack({
				delta:1
			})
		},
		mounted() {}
	}
</script>
<style scoped>
	.hhgbkjgbett {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, 1fr);
		grid-column-gap: 50upx;
		grid-row-gap: 50upx;
	}
	.kjhjihsdfr{
		height:70upx;
		line-height: 70upx;
		border:2upx solid rgba(153,153,153,1);
		border-radius:60upx;
		text-align: center;
	}
	.kjhnkjxerr{
		width: 38upx;
		height: 38upx;
		position: absolute;
		right: -14upx;
		top: -14upx;
	}
	.kjhjihsdfr.act{
		border-color: #1689D5;
		color: #1689D5;
	}
</style>
